<template>
  <div class="account-mind">
    <GimiSubTitle subTitle="我的导图" subDescription="查看和管理您创建的所有导图" />
    <ul class="mind-list" v-empty="!mindPageList.length">
      <li class="mind" v-for="item in mindPageList" :key="item.id">
        <div class="mind-preview">
          <img :src="item.coverImage" alt="">
        </div>
        <div class="mind-title">{{ item.name }}</div>
        <div class="modify-time">最后编辑于 {{ item.updateTime }}</div>
        <div class="mind-shadow">
          <p @click="router.push(`/mind-map/${item.id}`)">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text mr-2 h-4 w-4"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg>
            <span>编辑</span>
          </p>
          <el-button @click="selectMindId = item.id; shareModalVisible = true">分享</el-button>
        </div>
      </li>
    </ul>
    <div class="operate-button" v-if="pagination.pageNo < pagination.pages">
      <el-button
        @click="handleLoadMoreMind"
        size="large"
        :loading="loadMorIng">加载更多导图</el-button>
    </div>
  </div>

  <ShareMindModal v-if="shareModalVisible" :mindId="selectMindId" @close-modal="shareModalVisible = false" />
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { apiGetMindPageList } from '@/apis/work'
import type { Mind, PageResponse } from '@/types'
import ShareMindModal from '@/pages/work/components/ShareMindModal.vue'

const router = useRouter()
const shareModalVisible = ref(false)
const selectMindId = ref('')
const mindPageList = ref<Mind[]>([])
const pagination = reactive({
  pageNo: 1,
  pageSize: 9,
  total: 0,
  pages: 0
})
const loadMorIng = ref(false)

const queryMindPageList = async () => {
  loadMorIng.value = true
  try {
    const data = await apiGetMindPageList<PageResponse<Mind>>({
      pageNo: pagination.pageNo,
      pageSize: pagination.pageSize
    })
    const { list, total, pages } = data
    mindPageList.value.push(...list)
    pagination.total = total
    pagination.pages = pages
  } finally {
    loadMorIng.value = false
  }
}
queryMindPageList()

const handleLoadMoreMind = () => {
  pagination.pageNo += 1
  queryMindPageList()
}
</script>

<style lang="scss" scoped>
.mind-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  .mind {
    position: relative;
    border-radius: 6px;
    border: 1px solid #e4e4e7;
    padding: 6px;
    overflow: hidden;
    &:hover {
      .mind-shadow {
        opacity: 1;
      }
    }
    .mind-preview {
      font-size: 0;
      aspect-ratio: 2.1;
      overflow: hidden;
      border-radius: 6px;
      background-color: #f4f4f5;
      img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        max-width: 100%;
        display: block;
        transition: 0.3s;
      }
    }
    .mind-title {
      font-size: 13px;
      color: #09090b;
      line-height: 1.5;
      margin-top: 8px;
      padding: 0 8px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .modify-time {
      font-size: 12px;
      color: #71717a;
      font-weight: 500;
      margin: 2px 0 5px;
      padding: 0 8px;
    }
    .mind-shadow {
      position: absolute;
      z-index: 1;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-color: rgba(255, 255, 255, 0.9);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: 0.15s;
      p {
        display: flex;
        align-items: center;
        font-size: 14px;
        margin-right: 12px;
        background-color: #f4f4f5;
        border-radius: 6px;
        padding: 8px 16px;
        cursor: pointer;
        span {
          margin-left: 8px;
        }
      }
    }
  }
}
.operate-button {
  margin-top: 24px;
  .el-button {
    display: block;
    width: 100%;
  }
}
</style>
